<template>
  <view class="store-page">
    <view
      class="header"
      :style="{ paddingTop: heightConfig.navBarPaddingTop + 'px' }"
    >
      <view class="logo">
		  
	  <image
	    style="width: 60rpx; height: 60rpx; margin-right: 20rpx;border-radius: 50%;"
	    src="/static/images/logo.jpg"
	    mode="scaleToFill"
	  />
	  
	  </view>
    </view>
    <view class="content" v-if="classifyList.length > 0">
      <scroll-view scroll-y class="nav-menu">
        <view
          v-for="(item, index) in classifyList"
          :key="index"
          class="menu-item"
          :style="{
            borderLeft: index == currentItem ? '4rpx solid red' : 'none',
            background: index == currentItem ? '#fff' : '#f0f0f0',
          }"
          @click="clickMenu(index)"
          >{{ item.deptName }}</view
        >
      </scroll-view>
      <scroll-view scroll-y class="nav-content">
        <view class="menu-name" @click="toProductList">
          <text>{{ classifyList[currentItem].deptName }}</text>
          <image class="arrow" src="/static/images/my/9.png"></image>
        </view>
        <view class="content-item" @click="toProductList">
          <image
            class="image"
            :src="baseImgUrl + classifyList[currentItem].classifyImg"
          ></image>
          <view>
            <view class="product-name">{{
              classifyList[currentItem].deptName
            }}</view>
            <view class="product-detail">{{
              classifyList[currentItem].deptName
            }}</view>
            <view class="more">了解更多></view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import api from "@/api/product";
import { getToken } from "@/utils/auth";
import { baseImgUrl } from "@/config";
import login from "../api/login";

export default {
  name: "Store",
  data() {
    return {
      baseImgUrl,
      heightConfig: {},
      classifyList: [],
      currentItem: 0,
    };
  },
  async onLoad() {
    this.mainHeight = this.$store.getters.heightData.noTabMainHeight;
    this.heightConfig = this.$store.getters.heightData;

    this.getGoodClassify();
  },
  async onShow() {},
  methods: {
    // 获取商品分类列表
    getGoodClassify() {
      api.getGoodClassify().then((res) => {
        if (res.code == 200) {
          // this.classifyList = res.rows;
		 this.classifyList = res.rows.filter(item => item.deptName != "积分商品");
        }
      });
    },
    clickMenu(index) {
      this.currentItem = index;
    },
    toProductList() {
      const token = getToken();
      let id = this.classifyList[this.currentItem].id;
      if (!token) {
        // uni.navigateTo({
        //   url: "/pages/login",
        // });
      } else {
        uni.navigateTo({
          url: `/subPages/details/productList?id=${id}`,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.store-page {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: #fff;

  .header {
    width: 100%;
    padding: 0 28rpx;
    background-color: #fff;

    .logo {
      width: 200rpx;
      height: 60rpx;
      // background-color: #fee7eb;
      border-radius: 20px;
      text-align: center;
      line-height: 60rpx;
      margin: 0 auto;
    }
  }

  .content {
    display: flex;
    height: 90%;

    .nav-menu {
      width: 200rpx;
      min-height: 620rpx;

      .menu-item {
        width: 200rpx;
        height: 100rpx;
        box-sizing: border-box;
        line-height: 100rpx;
        text-align: center;
      }
    }

    .nav-content {
      flex: 1;
      min-height: 620rpx;

      .menu-name {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100rpx;
        margin: 0 20rpx;

        .arrow {
          width: 34rpx;
          height: 34rpx;
        }
      }

      .content-item {
        display: flex;
        padding: 30rpx;
        margin: 0 20rpx;
        box-sizing: border-box;
        box-shadow: 0 0 40rpx rgba(0, 0, 0, 0.1);
        align-items: center;
        border-radius: 16rpx;

        .image {
          width: 200rpx;
          height: 200rpx;
          margin-right: 16rpx;
        }

        .product-name {
          font-size: 32rpx;
          margin-bottom: 16rpx;
        }

        .product-detail {
          font-size: 24rpx;
          color: #999;
          margin-bottom: 32rpx;
        }

        .more {
          width: 180rpx;
          height: 40rpx;
          line-height: 40rpx;
          background: linear-gradient(to right, #fce5d8, #feb7d5);
          border-radius: 20rpx;
          text-align: center;
        }
      }
    }
  }
}
</style>
